<script src="<?=base_url()?>assets/js/jcorp/Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?=base_url()?>assets/css/wanwanui/Jcrop.css" type="text/css" />
<script src="<?=base_url()?>assets/js/util/wjJquery.js" type="text/javascript"></script>

<script type="text/javascript">

    jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $('#target').Jcrop({
		minSize: [100,100],
		maxSize:[190,190],
		setSelect: [0,0,190,190],
        onChange: updatePreview,
        onSelect: updatePreview,
		onSelect: updateCoords,
        aspectRatio: 1
      },
	function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
    });
	function updateCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords()
	{
		if (parseInt($('#w').val())) return true;
		alert('请选择裁剪区域.');
		return false;
	};
      function updatePreview(c){
        if (parseInt(c.w) > 0)
        {
          var rx = 48 / c.w;		//小头像预览Div的大小
          var ry = 48 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
	    {
          var rx = 199 / c.w;		//大头像预览Div的大小
          var ry = 199 / c.h;
          $('#preview2').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };
    });
	$("#cut_icon").click(function(){
	
		$("#cut_image_icon").ajaxSubmit({
			
			url:"<?=base_url('index.php/sczp/cutIcon/1/0/file')?>",
			dataType:"json",
			type:"POST",
			success:function(data){
				if(data.type==1){
					$("#dialogDiv").wjDialog({url:"<?=base_url()?>index.php/",content:"图标上传成功"});
				}		
		},error:function(data){

			$("#dialogDiv").wjDialog({url:"<?=base_url()?>index.php/",content:"系统繁忙请稍后再试"});
		}
		});
	});
  </script>
 </head>
 <body>

	<div style="float:left;"><img width="373px" height="373px" id="target" src="<?=$_GET['path']?>"  ></div>
	<div style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview" src="<?=$_GET['path']?>" ></div>
	<div style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img  style="float:left;" id="preview2" src="<?=$_GET['path']?>" ></div>
	<form action="" method="get" id="cut_image_icon" onsubmit="return checkCoords();">
		<input type="hidden" id="x" name="x" />
		<input type="hidden" id="y" name="y" />
		<input type="hidden" id="w" name="w" />
		<input type="hidden" id="h" name="h" />
		<input type="hidden" name="path" value="<?=$_GET['localPath']?>"/>
<!--		<input type="submit" value="裁剪" />-->
	</form>
	<div id="dialogDiv"></div>

